<template>
    <div class="personalcenter">
        <div class="titel"><h1>个人中心</h1></div>
        <div class="modification">
            <el-tabs v-model="activeName">
                <el-tab-pane label="修改个人信息" name="first">
                    <div class="msg">
                        <el-form label-width="80px">
                            <el-form-item label="姓名:">
                                <el-input
                                    v-model="salespersons.salesName"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="账号:">
                                <el-input
                                    v-model="salespersons.salesAccount"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码:">
                                <el-input
                                    :disabled="true"
                                    show-password
                                    v-model="salespersons.salesPassword"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式:">
                                <el-input
                                    v-model="salespersons.salesPhone"
                                ></el-input>
                            </el-form-item>
                            <el-button
                                type="success"
                                @click="updateSalesOneInfo(salespersons)"
                                >修改</el-button
                            >
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <div class="msg">
                        <el-form label-width="100px">
                            <el-form-item label="请输入旧密码:">
                                <el-input
                                    show-password
                                    v-model="salesPwdUpdate.oldsalesPwd"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="请输入新密码">
                                <el-input
                                    show-password
                                    v-model="salesPwdUpdate.newsalesPwd1"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="请确认新密码:">
                                <el-input
                                    show-password
                                    v-model="salesPwdUpdate.newsalesPwd2"
                                ></el-input>
                            </el-form-item>
                            <el-button
                                type="success"
                                @click="
                                    updateNewPwd(salesPwdUpdate.newsalesPwd2)
                                "
                                >确认修改</el-button
                            >
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广费" name="third">
                    <div class="msg">
                        <el-form label-width="100px">
                            <el-form-item label="推广费:">
                                <el-input></el-input>
                            </el-form-item>
                            <el-button type="success">添加</el-button>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("personal");
export default {
    data() {
        return {
            salespersons: {
                salesName: "",
                salesAccount: "",
                salesPassword: "",
                salesPhone: "",
            },
            salesPwdUpdate: {
                oldsalesPwd: "",
                newsalesPwd1: "",
                newsalesPwd2: "",
            },
            activeName: "second",
        };
    },
    async mounted() {
        await this.getPersonAction(JSON.parse(localStorage.user)._id);
        this.salespersons = this.personInfo;
    },
    computed: {
        ...mapState(["personInfo"]),
    },
    methods: {
        ...mapActions(["getPersonAction", "updateSalespersons"]),
        async updateSalesOneInfo(info) {
            let data = await this.updateSalespersons(info);
            if (data.code) {
                this.$message({
                    message: "信息修改成功！",
                    type: "success",
                });
            } else {
                this.$message.error("信息修改失败");
            }
        },
        async updateNewPwd(val) {
            if (
                this.salespersons.salesPassword ===
                this.salesPwdUpdate.oldsalesPwd
            ) {
                if (
                    this.salesPwdUpdate.newsalesPwd1 ===
                    this.salesPwdUpdate.newsalesPwd2
                ) {
                    this.salespersons.salesPassword = val;
                    let data = await this.updateSalespersons(this.salespersons);
                    if (data.code) {
                        this.$message({
                            message: "信息修改成功！",
                            type: "success",
                        });
                    } else {
                        this.$message.error("信息修改失败");
                    }
                } else {
                    this.$message.error("两次输入的新密码不一致");
                }
            } else {
                this.$message.error("输入的旧密码有误");
            }
        },
    },
};
</script>

<style lang="scss">
.personalcenter {
    .titel {
        line-height: 40px;
        background: rgba(185, 169, 169, 0.911);
        h1 {
            margin-left: 20px;
            color: rgb(255, 255, 255);
        }
    }
    .titel1 {
        width: 100%;
        margin-left: 30px;
    }
    .el-tabs {
        margin-top: 20px;
    }
    .msg {
        background: white;
        margin-top: 20px;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .el-form {
            width: 350px;
            text-align: center;
        }
    }
}
</style>
